<template>
    <view class="content">
        <view class="nav">
            <view class="nav-item" @click="chooseNav(1)">
                <image src="../../static/image/s_img_07.png" class="nav-icon"></image>
                <view class="nav-title" :class="{active : type == 1}">学习中心</view>
            </view>
            <view class="nav-item" @click="chooseNav(2)">
                <image src="../../static/image/s_img_08.png" class="nav-icon"></image>
                <view class="nav-title" :class="{active : type == 2}">体验中心</view>
            </view>
        </view>
        
        <view class="box">
            <view class="notice" v-for="(item, index) in 2" :key="index" 
                @click="$gTo('./my-serve-details?id=' + item.id)">
                <view class="u-flex u-row-center">
                    <view class="time u-font-22">{{item.create_time}}</view>
                </view>
                <view class="notice-item">
                    <image :src="item.title_pic_url" v-if="item.title_pic_url"></image>
                    <view class="notice-text">
                        <view class="u-font-30 text-bold">{{item.title}}</view>
                        <view class="text u-line-1" v-if="item.ftitle">{{item.ftitle}}</view>
                    </view>
                </view>
            </view>
            
            <!-- <view class="notice" v-if="type == 2" v-for="(item, index) in list" :key="index" >
                <view class="u-flex u-row-center">
                    <view class="time u-font-22">{{item.create_time}}</view>
                </view>
                <view class="notice-item">
                    <view class="notice-text">
                        <view class="u-font-30 text-bold">{{item.title}}</view>
                        <view class="text">{{item.content}}</view>
                    </view>
                </view>
            </view> -->
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 1,
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
            };
        },
        onLoad(option) {
            if (option.type) {
                this.type = option.type
            }
            // this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.list = []
                this.page = 1
                this.status = 'loadmore'
                this.getList()
            },
            
            getList() {
                var url = '', promise = {}
                if (this.type == 1) {
                    url = 'contentsList'
                    promise = {
                        userToken: this.$getSync('userToken'),
                        page: this.page,
                        limit: 10,
                        column_id: 1,//分类 传 1
                    }
                } else if (this.type == 2) {
                    url = 'membersmessage'
                    promise = {
                        userToken: this.$getSync('userToken'),
                        page: this.page,
                        limit: 10,
                    }
                }
                
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax(url, promise).then(ret => {
            		if (ret.status == 0) {
                        if (this.type == 1) {
                            if (ret.data.length > 0) {
                            	this.list = this.list.concat(ret.data);
                            	this.page++;
                            	this.status = 'loadmore'
                            } else {
                            	this.status = 'nomore'
                            }
                        } else {
                            this.count = ret.data.count
                            
                            if (ret.data && ret.data.list && ret.data.list.length > 0) {
                            	this.list = this.list.concat(ret.data.list);
                            	this.page++;
                            	this.status = 'loadmore'
                            } else {
                            	this.status = 'nomore'
                            }
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    .nav{
        background-color: #fff;
        padding: 35rpx 0 25rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .nav-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .num{
        font-size: 18rpx;
        line-height: 1;
        color: #fff;
        padding: 8rpx;
        background-color: #fe6155;
        border-radius: 15rpx 15rpx 15rpx 0;
        position: absolute;
        right: -10rpx;
        top: -10rpx;
    }
    .nav-icon{
        width: 83rpx;
        height: 83rpx;
        margin-bottom: 15rpx;
    }
    .nav-title{
        font-size: 24rpx;
        font-weight: bold;
    }
    .active{
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 93rpx;
        height: 4rpx;
        background-color: #f29700;
        position: absolute;
        bottom: -25rpx;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .box{
        padding: 0 20rpx 50rpx;
        margin-top: 30rpx;
    }
    .time{
        color: #FFFFFF;
        background-color: #dfdfdf;
        padding: 10rpx 20rpx;
        border-radius: 50rpx;
        line-height: 1;
    }
    .text{
        font-size: 24rpx;
        color: #666666;
        padding-top: 8rpx;
    }
    
    .notice-item >image{
        width: 710rpx;
        height: 279rpx;
    }
    .notice-item{
       background-color: #FFFFFF;
       margin: 20rpx 0 30rpx;
       border-radius: 20rpx; 
       overflow: hidden;
    }
    .notice-text{
        padding: 30rpx 35rpx 40rpx;
    }
    
    

</style>
